﻿<UserControl x:Class="LFMTest.SearchResults"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignWidth="1366" d:DesignHeight="768">

    <UserControl.Resources>
        <DataTemplate x:Key="ArtistResult">
            <Grid Height="75" Width="500">
                <Image HorizontalAlignment="Left" Height="75" VerticalAlignment="Top" Width="150" Stretch="UniformToFill" >
                    <Image.Source>
                        <BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding ImageExtraLarge}" />
                    </Image.Source>
                </Image>
                <StackPanel Margin="156,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                    <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="24" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,-6,0,0" />
                    <TextBlock Text="{Binding Url}" FontSize="12" Foreground="Gray" VerticalAlignment="Top" TextWrapping="Wrap" Margin="0,-4,0,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="AlbumResult">
            <Grid Height="75" Width="500">
                <Image HorizontalAlignment="Left" Height="75" VerticalAlignment="Top" Width="75" Stretch="UniformToFill" >
                    <Image.Source>
                        <BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding ImageExtraLarge}" />
                    </Image.Source>
                </Image>
                <StackPanel Margin="81,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                    <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="24" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,3,0,0" LineHeight="23" LineStackingStrategy="BlockLineHeight"/>
                    <TextBlock Text="{Binding Artist.Name}" FontSize="12" Foreground="Gray" VerticalAlignment="Top" TextWrapping="Wrap" Margin="0,-4,0,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TrackResult">
            <Grid Height="75" Width="500">
                <Image HorizontalAlignment="Left" Height="75" VerticalAlignment="Top" Width="75" Stretch="UniformToFill" >
                    <Image.Source>
                        <BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding Album.ImageExtraLarge}" />
                    </Image.Source>
                </Image>
                <StackPanel Margin="81,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                    <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="24" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,3,0,0" LineHeight="23" LineStackingStrategy="BlockLineHeight"/>
                    <TextBlock Text="{Binding Artist.Name}" FontSize="12" Foreground="Gray" VerticalAlignment="Top" TextWrapping="Wrap" Margin="0,-4,0,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="ApplicationName">My Application</x:String>

        <SolidColorBrush x:Key="HighlightBrush" Color="#FF26A0DA"/>

        <!-- LayoutRoot Grid Style -->

        <Style x:Key="LayoutRootGridStyle" TargetType="Grid">
            <Setter Property="Background" Value="Black"/>
        </Style>


        <!-- Standard Fonts -->

        <Style x:Key="DefaultFontStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="26.667"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
        </Style>

        <Style x:Key="LargeContentFontStyle" TargetType="TextBlock" BasedOn="{StaticResource DefaultFontStyle}" />

        <Style x:Key="SmallContentFontStyle" TargetType="TextBlock" BasedOn="{StaticResource DefaultFontStyle}">
            <Setter Property="FontSize" Value="14.667"/>
        </Style>

        <!-- Title Panel Styles -->

        <Style x:Key="BackButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="40" />
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Margin" Value="40,0,40,40" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Canvas x:Name="BackButton">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverEllipse" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PressedEllipse" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackButton" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse x:Name="PressedEllipse" Fill="{StaticResource HighlightBrush}" Opacity="0" Width="40" Height="40"/>
                            <Ellipse x:Name="MouseOverEllipse" Fill="#7F8D8D8D" Opacity="0" Width="40" Height="40"/>
                            <Path Fill="White" Data="F1M20.2168,40C31.2608,40,40.2168,31.045,40.2168,20C40.2168,8.958,31.2608,0,20.2168,0C9.1708,0,0.216799999999999,8.958,0.216799999999999,20C0.216799999999999,31.045,9.1708,40,20.2168,40 M20.2168,37.161C10.7548,37.161,3.0578,29.462,3.0578,20C3.0578,10.538,10.7548,2.839,20.2168,2.839C29.6788,2.839,37.3758,10.538,37.3758,20C37.3758,29.462,29.6788,37.161,20.2168,37.161"/>
                            <Path Fill="White" Canvas.Left="9.269" Canvas.Top="12.263" Height="15.477" Width="20.928" Stretch="UniformToFill" Data="F1M16.5576,18.0596L22.7016,12.2626L17.7046,12.2626L9.4856,20.0176L17.6686,27.7396L22.6646,27.7396L16.5576,21.9766L30.4136,21.9766L30.4136,18.0596z"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SnapBackButtonStyle" TargetType="Button" BasedOn="{StaticResource BackButtonStyle}">
            <Setter Property="Margin" Value="5,0,5,33" />
            <!-- All values offset by 5 as the button lays out as 40x40, just rendered at 26x26 -->
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <CompositeTransform ScaleX="0.65" ScaleY="0.65" />
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="PageTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource DefaultFontStyle}">
            <Setter Property="Margin" Value="0,0,30,28" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="TextWrapping" Value="NoWrap"/>
            <Setter Property="FontSize" Value="53.333"/>
        </Style>

        <Style x:Key="PageSubTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource DefaultFontStyle}">
            <Setter Property="Margin" Value="0,0,0,34" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="TextWrapping" Value="NoWrap"/>
        </Style>

        <Style x:Key="SnapPageTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource PageTitleStyle}">
            <Setter Property="Margin" Value="0,0,12,33" />
            <Setter Property="FontSize" Value="26.667"/>
        </Style>

        <!-- Filter Button Style -->

        <SolidColorBrush x:Key="FilterActiveBrush" Color="#FF26A0DA"/>
        <Color x:Key="FilterActiveColor">#FF26A0DA</Color>
        <Color x:Key="FilterMouseOverColor">#FF3891B6</Color>
        <Color x:Key="FilterPressedTextColor">#FF464646</Color>
        <SolidColorBrush x:Key="FilterPressedFillColor" Color="White"/>
        <Color x:Key="FilterDisabledColor">#FF707070</Color>
        <SolidColorBrush x:Key="FilterTextColor" Color="White"/>
        <FontFamily x:Key="ContentFontFamily">Segoe UI</FontFamily>
        <x:Double x:Key="ContentFontSize">26.667</x:Double>


        <Style x:Key="FilterButtonStyle" TargetType="RadioButton">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{StaticResource FilterTextColor}"/>
            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}"/>
            <Setter Property="FontSize" Value="{StaticResource ContentFontSize}"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="MinHeight" Value="30"/>
            <Setter Property="MinWidth" Value="100"/>
            <Setter Property="Margin" Value="0,0,40,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentControl" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentControl"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="{StaticResource FilterActiveColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentControl"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="contentControl" Foreground="{TemplateBinding Foreground}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <!-- Page Content -->

    <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition FromHorizontalOffset="400" />
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SearchTemplateViewStates">
                <VisualState x:Name="Full"/>
                <VisualState x:Name="Fill"/>
                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <!-- Usually this style is applied to the Page title, but in the snapped search results view we show the query as the title and hide the actual title -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="QueryText">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PageTitle">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ResultText">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Orientation" Storyboard.TargetName="ResultsPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="FiltersPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" Grid.Column="0" Click="BackButton_Click" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="PageTitle" Grid.Column="1" Text="Search Test" Style="{StaticResource PageTitleStyle}"  />
            <TextBlock x:Name="ResultText" Grid.Column="2" Text='Results for ' Style="{StaticResource PageSubTitleStyle}"/>
            <TextBlock x:Name="QueryText" Grid.Column="3" Text="{Binding QueryText}" Style="{StaticResource PageSubTitleStyle}"/>
        </Grid>

        <ComboBox x:Name="filter" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Margin="120,-10,0,0" Width="150" SelectedIndex="0" SelectionChanged="filter_SelectionChanged">
            <ComboBoxItem Content="Artists" Width="150" />
            <ComboBoxItem Content="Albums" Width="150" />
            <ComboBoxItem Content="Tracks" Width="150" />
        </ComboBox>
        <!--<StackPanel x:Name="FiltersPanel" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Grid.Row="1" Margin="120,0,0,0">
      <RadioButton Content="{Binding AllFilter}" Style="{StaticResource FilterButtonStyle}" />
      <RadioButton Content="Albums" Style="{StaticResource FilterButtonStyle}" />
      <RadioButton Content="Tracks" Style="{StaticResource FilterButtonStyle}" />
    </StackPanel>-->
        <GridView x:Name="ArtistPanel" Grid.Row="2" Margin="0,12,0,0" ItemTemplate="{StaticResource ArtistResult}" VerticalAlignment="Stretch" VerticalContentAlignment="Top" Visibility="Collapsed">
        </GridView>
        <GridView x:Name="AlbumPanel" Grid.Row="2" Margin="0,12,0,0" ItemTemplate="{StaticResource AlbumResult}" VerticalAlignment="Stretch" VerticalContentAlignment="Top" Visibility="Collapsed">
        </GridView>
        <GridView x:Name="TrackPanel" Grid.Row="2" Margin="0,12,0,0" ItemTemplate="{StaticResource TrackResult}" VerticalAlignment="Stretch" VerticalContentAlignment="Top" Visibility="Collapsed">
        </GridView>
        <ProgressRing x:Name="pRing" Grid.Row="2" Height="156" Width="156" IsActive="True"/>
    </Grid>
</UserControl>
